d30

16th鐵人賽

max1112

2024-10-14 17:30:42

182 瀏覽

分享至

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API Example</title>

    <!-- 引用外部的 CSS 文件來設計頁面樣式 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Users List</h1>

        <!-- 顯示用戶資料的容器 -->
        <div id="users-container"></div>

        <!-- 提交請求以獲取用戶資料的按鈕 -->
        <button onclick="fetchUsers()">Load Users</button>
    </div>

    <!-- 引用外部的 JavaScript 文件來處理 Fetch API -->
    <script src="script.js"></script>
</body>
</html>

JavaScript

// 使用 Fetch API 從公共 API 獲取用戶數據
function fetchUsers() {
    const usersContainer = document.getElementById('users-container');

    // 發送 HTTP GET 請求到 JSONPlaceholder API
    fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => {
            if (!response.ok) {
                // 如果 HTTP 狀態碼不是 200，則拋出錯誤
                throw new Error('Network response was not ok');
            }
            return response.json(); // 解析 JSON 數據
        })
        .then(users => {
            // 清空用戶容器中的內容
            usersContainer.innerHTML = '';

            // 遍歷每一個用戶並顯示用戶資料
            users.forEach(user => {
                const userDiv = document.createElement('div'); // 建立一個div元素來顯示用戶資訊
                userDiv.classList.add('user');

                // 將用戶的名字和電子郵件顯示在 div 中
                userDiv.innerHTML = `
                    <h2>${user.name}</h2>
                    <p>Email: ${user.email}</p>
                    <p>Phone: ${user.phone}</p>
                    <p>Website: <a href="http://${user.website}" target="_blank">${user.website}</a></p>
                `;

                // 將這個 div 加到用戶容器中
                usersContainer.appendChild(userDiv);
            });
        })
        .catch(error => {
            // 如果出現錯誤，顯示錯誤信息
            usersContainer.innerHTML = `<p>Error: ${error.message}</p>`;
        });
}

CSS

/* 基本樣式 */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* 容器樣式 */
.container {
    text-align: center;
    width: 80%;
    max-width: 600px;
}

/* 顯示用戶資料的樣式 */
.user {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 10px 0;
    padding: 20px;
}

/* 按鈕樣式 */
button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
}

button:hover {
    background-color: #218838;
}

/* 鏈接樣式 */
a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}